import { use, useEffect, useState } from 'react'
import { Link, Navigate } from 'react-router-dom'
import {
	Breadcrumb,
	Card,
	Form,
	Select,
	Radio,
	DatePicker,
	Button,
	Table,
	Popconfirm,
	message,
	Tag
} from 'antd'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { getArticlesAPI, deleteArticleAPI } from '@/apis'
import { useChannel } from '@/hooks/useChannel'
import './index.scss'
import dayjs from 'dayjs'
import { useNavigate } from'react-router-dom'
const { RangePicker } = DatePicker

const STATUS = [
	{
		name: '草稿',
		color: 'blue'
	},
	{
		name: '待审核',
		color: 'gold'
	},
	{
		name: '审核通过',
		color: 'green'
	},
	{
		name: '审核失败',
		color: 'red'
	}
]

const Article = () => {
	const navigate = useNavigate()
	const { channelList } = useChannel()

	const [reqData, setReqData] = useState({
		status: '',
		channel_id: '',
		begin_pubdate: '',
		end_pubdate: '',
		page: 1,
		per_page: 10
	})

	// 表单提交
	const [articleList, setArticleList] = useState([])
	const [count, setCount] = useState(0)

	useEffect(() => {
		(async () => {
			const res = await getArticlesAPI(reqData).then(res => res.data)
			setArticleList(res.results)
			setCount(res.total_count)
		})()
	}, [reqData])

	const onFinish = async (formData) => {
		const [begin_pubdate, end_pubdate] = formData.date
		setReqData({
			...reqData,
			channel_id: formData.channel_id,
			status: formData.status === -1 ? '' : formData.status,
			begin_pubdate: begin_pubdate && dayjs(begin_pubdate).format('YYYY-MM-DD'),
			end_pubdate: end_pubdate && dayjs(end_pubdate).format('YYYY-MM-DD')
		})
	}

	const columns = [
		{
			title: '封面',
			dataIndex: 'cover',
			key: 'cover',
			width: 120,
			render: cover => {
				return <img src={cover.images[0] || null} width={80} height={80} alt="cover" />
			}
		},
		{
			title: '标题',
			dataIndex: 'title',
			key: 'title',
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			render: status => <Tag color={STATUS[status].color} >
				{STATUS[status].name}
			</Tag>
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate',
			key: 'pubdate',
		},
		{
			title: '阅读数',
			dataIndex: 'read_count',
			key: 'read_count',
		},
		{
			title: '评论数',
			dataIndex: 'comment_count',
			key: 'comment_count',
		},
		{
			title: '点赞数',
			dataIndex: 'like_count',
			key: 'like_count',
		},
		{
			title: '操作',
			width: 120,
			render: (data) => {
				return <div className="operation-btns">
					<div className="edit-btn" onClick={() => {navigate(`/publish?id=${data.id}`)}}>
						<EditOutlined />
					</div>
					<div className="delete-btn">
						<Popconfirm
							title='确认删除吗？'
							okText="确定"
							cancelText="取消"
							onConfirm={() => onDeleteConfirm(data)}
						>
							<DeleteOutlined />
						</Popconfirm>
					</div>
				</div>
			}
		},
	]

	// 表格分页
	const onTableChange = (pagination) => {
		setReqData({
			...reqData,
			page: pagination.current,
			per_page: pagination.pageSize
		})
	}

	// 删除确认弹窗
	const onDeleteConfirm = async(data) => {
		await deleteArticleAPI(data.id)
		setReqData({...reqData})
		message.success('删除成功')
	}

	return (
		<div className='article-container'>
			<Card title={
				<Breadcrumb items={[
					{ title: <Link to={'/'}> 首页 </Link> },
					{ title: '文章列表' }
				]} />
			} bordered={false}
				className="select-card"
			>
				<Form
					initialValues={{
						channel_id: null,
						status: -1,
						date: [null, null]
					}}
					onFinish={onFinish}
				>
					<Form.Item label="状态" name="status" rules={[{ required: false }]}>
						<Radio.Group>
							<Radio value={-1} key="all">全部</Radio>
							<Radio value={0} key="draft">草稿</Radio>
							<Radio value={1} key="wait">待审核</Radio>
							<Radio value={2} key="pass">审核通过</Radio>
							<Radio value={3} key="fail">审核失败</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item label="频道" name="channel_id" rules={[{ required: false }]}>
						<Select placeholder="请输入文章频道">
							{
								channelList.map((item) => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
								)
							}
						</Select>
					</Form.Item>


					<Form.Item label="开始时间" name="date" rules={[{ required: false }]}>
						<RangePicker />
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 1 }}>
						<Button type="primary" htmlType="submit">筛选</Button>
					</Form.Item>
				</Form>
			</Card>

			<Card title={
				`根据筛选条件共查询到${count}条结果:`
			} bordered={false}
				className="article-card"
			>
				<Table
					dataSource={articleList}
					columns={columns}
					pagination={{
						pageSize: reqData.per_page,
						total: count
					}}
					onChange={onTableChange}
				/>
			</Card>
		</ div>
	)
}

export default Article